<template>
  <div class="Login">
    <main>
      <div class="Login-title">
        <div class="Login-title-top">WELCOME</div>
        <div class="Login-title-bottom">大厂智慧社区管理系统后台</div>
      </div>
      <el-form
        :model="formUser"
        :rules="rules"
        ref="formRef"
        @submit.prevent="submitLogin"
      >
        <el-form-item>
          <el-input
            type="text"
            placeholder="用户名"
            v-model="formUser.username"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            type="password"
            placeholder="密码"
            v-model="formUser.password"
            :prefix-icon="Lock"
          />
        </el-form-item>
        <div class="Login-option">
          <el-checkbox style="color: black" label="自动登录" value="option1" />
        </div>
        <el-form-item>
          <el-button type="primary" native-type="submit"> 登录 </el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const formUser = reactive({
  username: "",
  password: "",
});

//表单的校验规则
const rules = reactive({
  username: [
    { required: true, message: "请输入您的用户名", trigger: "blur" },
    { min: 3, max: 15, message: "用户名长度在3-15个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入您的密码", trigger: "blur" },
    { min: 6, max: 15, message: "密码长度在6-15个字符", trigger: "blur" },
  ],
});

//获取到表单的结构
const formRef = ref(null);

//获取到路由
const router = useRouter();

//定义表单提交事件
const submitLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      // 添加提交逻辑
      const config = {
        url: "http://localhost:8080/user/login",
        method: "POST",
        data: {
          username: formUser.username,
          password: formUser.password,
        },
      };

      const response = await axios(config);
      if (response.data.code === 1) {
        localStorage.setItem("token", response.data.data);
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        setTimeout(() => {
          router.push("/backend/workbar");
        }, 2000);
      } else {
        ElMessage({
          message: response.data.msg,
          type: "error",
        });
      }
    } else {
      ElMessage({
        message: "验证失败",
        type: "error",
      });
    }
  });
};

// 设置 axios 拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem("token");  // 从 localStorage 中获取 Token
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;  // 自动在请求头中添加 Authorization 字段
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
</script>

<style lang="less" scoped>
.Login {
  height: 100vh;
  width: 100vw;
  background-image: url("../asset/LoginPng.jpg");
  background-size: cover;
}

/* 使用rem  进行适配处理 */
.Login-title {
  display: grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  font-size: 3rem;
  color: #0b0b0b;
  top: 17%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 3px solid #000;
  margin-bottom: 5rem;

  .Login-title-top {
    position: relative;
    left: 1rem;
    margin-bottom: 0.5rem;
  }
  .Login-title-bottom {
    position: relative;
    left: 1rem;
  }
}

.el-form {
  display: grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  width: 50rem;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-input {
    position: relative;
    margin-bottom: 2rem;
    height: 3.5rem;
    width: 30rem;
  }
  .Login-option {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 1.4rem;
    flex: 1;
    flex: 1;
    line-height: 3rem;
    a {
      color: rgb(0, 0, 0);
      text-decoration: none;
    }
  }
  .el-button {
    position: relative;
    width: 30rem;
    height: 3.5rem;
    margin-top: 1rem;
  }
}
</style>
